<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>..::Home::..</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>
	
	<script type="text/javascript" src="js/jssor-slider/js/jssor.core.js"></script>
    <script type="text/javascript" src="js/jssor-slider/js/jssor.utils.js"></script>
    <script type="text/javascript" src="js/jssor-slider/js/jssor.slider.js"></script>
	<script type="text/javascript" src="js/tabs_nav.js"></script>
</head>
<body>
	<div id="wrapper-header">
            <div class="wrapper" >
				<div id="logo">
					<img src="images/ui/logo.png" alt="hmobile"/>
					<ul>
						<li><a href="#" tilte="" >Home page</a></li>
						<li><a href="#" tilte="" >About</a></li>
						<li><a href="#" tilte="" >Contact</a></li>
						<li><a href="#" tilte="" >news</a></li>
						
					</u>
				</div>
				<div id="box-user">
					<div id="card">
						<h3>Giỏ hàng <span>0</span> sản phẩm</h3>
					</div>
					<div id="login-panel">
						<a href="#" title="đăng nhập" >Login</a>
						<a href="#" title="đăng kí" > Register </a>
					</div>
				</div>
				<div class="clearb"></div>
			</div>  
	</div>
	<div id="wrapper-section">
		<!-- navigation -->
		<div id="navigation">
			<div class="wrapper">
				<ul class="clearfix">
					<li>
						<a href="#" tilte="" >Sản phẩm</a>
						<ul>
							<li><a href="#" title="">Apple</a></li>
							<li><a href="#" title="">Samsung</a></li>
							<li><a href="#" title="">HTC</a></li>
							<li><a href="#" title="">LG</a></li>
							<li><a href="#" title="">Nokia</a></li>
							<li><a href="#" title="">Blackberry</a></li>
						</ul>
					</li>
					<li><a href="#" tilte="" >Phụ kiện</a></li>
					<li><a href="#" tilte="" >Bảo hành</a></li>
					<li><a href="#" tilte="" >Khuyến mãi</a></li>
				</ul>
			</div>
		</div>
		<div class="wrapper">		
						
			<!-- search box -->
			<div id="search-box" class="clearfix">						
					<form id="frm-search">
						<h3 class="title"> Tìm kiếm </h3>	
						<input type="text" value="Nhập từ khóa" name="keyword" id="frm-search-keyword" />
						<script>
							/*
								js auto show text in tag input
							*/							
							$(document).ready(function(){
								var valueDefault = document.getElementById("frm-search-keyword").value;
								$("#frm-search-keyword").focus(function(){	
									var keyword = $(this).val();
									if(keyword==valueDefault){
										document.getElementById("frm-search-keyword").value = ""; 
										keyword="";
									}
								});
								$("#frm-search-keyword").blur(function(){
									var keyword = $(this).val();
									if(keyword.trim()==""){
										document.getElementById("frm-search-keyword").value=valueDefault;
									}
								});
								
								//submit
								$("#images-submit").click(function(){
									var keyword = document.getElementById("frm-search-keyword").value;
									if(keyword==valueDefault){
										document.getElementById("frm-search-keyword").value = ""; 
									}									
									$("#frm-search").submit();
								});
							})
						
						</script>
						
						<select name="category">
							<option value="0">Chọn hãng sản xuất</option>
						</select>
						
						<select name="from-price">
							<option value="0">Chọn hãng sản xuất</option>
						</select>
						
						<select name="to-price">
							<option value="0">Chọn hãng sản xuất</option>
						</select>
						
						<span id="images-submit">&nbsp;</span>
					</form>
				
			</div>
			
			<!-- main-contain -->
			<div id="main-contain" class="clearfix">
				<!-- left -->
				<div id="left-wrap">
					<div id="left-column">
						<div class="block">
							<h3 class="title">Chi tiết sản phẩm</h3>
							<div id="detail-product" class="content">
								<div class="basic-info clearfix">
									<div class="box-image">		
										<script>

        jQuery(document).ready(function ($) {

            var _SlideshowTransitions = [
            //Fade in L
                {$Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
            //Fade out R
                , { $Duration: 1200, $SlideOut: true, $FlyDirection: 2, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
            //Fade in R
                , { $Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 2, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
            //Fade out L
                , { $Duration: 1200, $SlideOut: true, $FlyDirection: 1, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $Opacity: 2 }

            //Fade in T
                , { $Duration: 1200, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleVertical: 0.3, $Opacity: 2 }
            //Fade out B
                , { $Duration: 1200, $SlideOut: true, $FlyDirection: 8, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleVertical: 0.3, $Opacity: 2 }
            //Fade in B
                , { $Duration: 1200, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 8, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleVertical: 0.3, $Opacity: 2 }
            //Fade out T
                , { $Duration: 1200, $SlideOut: true, $FlyDirection: 4, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleVertical: 0.3, $Opacity: 2 }

            //Fade in LR
                , { $Duration: 1200, $Cols: 2, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $ChessMode: { $Column: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
            //Fade out LR
                , { $Duration: 1200, $Cols: 2, $SlideOut: true, $FlyDirection: 1, $ChessMode: { $Column: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
            //Fade in TB
                , { $Duration: 1200, $Rows: 2, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $ChessMode: { $Row: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleVertical: 0.3, $Opacity: 2 }
            //Fade out TB
                , { $Duration: 1200, $Rows: 2, $SlideOut: true, $FlyDirection: 4, $ChessMode: { $Row: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleVertical: 0.3, $Opacity: 2 }

            //Fade in LR Chess
                , { $Duration: 1200, $Cols: 2, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $ChessMode: { $Column: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleVertical: 0.3, $Opacity: 2 }
            //Fade out LR Chess
                , { $Duration: 1200, $Cols: 2, $SlideOut: true, $FlyDirection: 8, $ChessMode: { $Column: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleVertical: 0.3, $Opacity: 2 }
            //Fade in TB Chess
                , { $Duration: 1200, $Rows: 2, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
            //Fade out TB Chess
                , { $Duration: 1200, $Rows: 2, $SlideOut: true, $FlyDirection: 2, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $Opacity: 2 }

            //Fade in Corners
                , { $Duration: 1200, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $FlyDirection: 5, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Opacity: 2 }
            //Fade out Corners
                , { $Duration: 1200, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $SlideOut: true, $FlyDirection: 5, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Opacity: 2 }

            //Fade Clip in H
                , { $Duration: 1200, $Delay: 20, $Clip: 3, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
            //Fade Clip out H
                , { $Duration: 1200, $Delay: 20, $Clip: 3, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseOutCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
            //Fade Clip in V
                , { $Duration: 1200, $Delay: 20, $Clip: 12, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
            //Fade Clip out V
                , { $Duration: 1200, $Delay: 20, $Clip: 12, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseOutCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
                ];

            var options = {
                $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $AutoPlayInterval: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                $PauseOnHover: 3,                                //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3

                $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
                $ArrowKeyNavigation: true,   			            //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
                $SlideDuration: 800,                                //Specifies default duration (swipe) for slide in milliseconds

                $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                    $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                    $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                    $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                    $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
                },

                $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 1                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                },

                $ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
                    $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

                    $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                    $SpacingX: 8,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
                    $DisplayPieces: 10,                             //[Optional] Number of pieces to display, default value is 1
                    $ParkingPosition: 360                          //[Optional] The offset position to park thumbnail
                }
            };

            var jssor_slider1 = new $JssorSlider$("slider1_container", options);
            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizes
            function ScaleSlider() {
                var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
                if (parentWidth)
                    jssor_slider1.$SetScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
                else
                    window.setTimeout(ScaleSlider, 30);
            }

            ScaleSlider();

            if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
                $(window).bind('resize', ScaleSlider);
            }
            //responsive code end
        });
    </script>
										<!-- Jssor Slider Begin -->
    <!-- You can move inline styles (except 'top', 'left', 'width' and 'height') to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 400px;
        height: 500px; overflow: hidden;">

        

        <!-- Slides Container -->
        <div u="slides" class='slider-container' style="cursor: move; position: absolute; left: 0px; top: 0px; width: 400px; height: 400px; overflow: hidden;">
            
            <div>
                <img u="image" src="images/ui/ip5.jpg" />
                <img u="image" src="images/ui/ip5.jpg" />
            </div>
            <div>
                <img u="image" src="images/ui/ip5.jpg" />
                <img u="image" src="images/ui/ip5.jpg" />
            </div>
			<div>
                <img u="image" src="images/ui/ip5.jpg" />
                <img u="image" src="images/ui/ip5.jpg" />
            </div>
			<div>
                <img u="image" src="images/ui/ip5.jpg" />
                <img u="image" src="images/ui/ip5.jpg" />
            </div>
			<div>
                <img u="image" src="images/ui/ip5.jpg" />
                <img u="image" src="images/ui/ip5.jpg" />
            </div>
            <div>
                <img u="image" src="images/ui/ip5.jpg" />
                <img u="image" src="images/ui/ip5.jpg" />
            </div>
            <div>
                <img u="image" src="images/ui/ip5.jpg" />
                <img u="image" src="images/ui/ip5.jpg" />
            </div>
        </div>
        
        <!-- Arrow Navigator Skin Begin -->
        <style>
            /* jssor slider arrow navigator skin 05 css */
            /*
            .jssora05l              (normal)
            .jssora05r              (normal)
            .jssora05l:hover        (normal mouseover)
            .jssora05r:hover        (normal mouseover)
            .jssora05ldn            (mousedown)
            .jssora05rdn            (mousedown)
            */
            .jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
            {
            	position: absolute;
            	cursor: pointer;
            	display: block;
                background: url(../img/a17.png) no-repeat;
                overflow:hidden;
            }
            .jssora05l { background-position: -10px -40px; }
            .jssora05r { background-position: -70px -40px; }
            .jssora05l:hover { background-position: -130px -40px; }
            .jssora05r:hover { background-position: -190px -40px; }
            .jssora05ldn { background-position: -250px -40px; }
            .jssora05rdn { background-position: -310px -40px; }
        </style>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px; left: 8px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px">
        </span>
        <!-- Arrow Navigator Skin End -->
        
        <!-- Thumbnail Navigator Skin Begin -->
        <div u="thumbnavigator" class="jssort01" style="position: absolute; width: 100px; height: 100px; left:40px; bottom: 0px;  text-align: center;" >
            <!-- Thumbnail Item Skin Begin -->
            <style>
                /* jssor slider thumbnail navigator skin 01 css */
                /*
                .jssort01 .p           (normal)
                .jssort01 .p:hover     (normal mouseover)
                .jssort01 .pav           (active)
                .jssort01 .pav:hover     (active mouseover)
                .jssort01 .pdn           (mousedown)
                */
                .jssort01 .w {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 100%;
                    height: 100%;
                }

                .jssort01 .c {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 68px;
                    height: 68px;
                    border: #000 2px solid;
                }

                .jssort01 .p:hover .c, .jssort01 .pav:hover .c, .jssort01 .pav .c {
                    background: url(../img/t01.png) center center;
                    border-width: 0px;
                    top: 2px;
                    left: 2px;
                    width: 68px;
                    height: 68px;
                }

                .jssort01 .p:hover .c, .jssort01 .pav:hover .c {
                    top: 0px;
                    left: 0px;
                    width: 70px;
                    height: 70px;
                    border: #fff 1px solid;
                }
            </style>
            <div u="slides" style="cursor: move;">
                <div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0; left: 0;" class='prototype'>
                    <div class=w><thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate></div>
                    <div class=c>
                    </div>
                </div>
            </div>
            <!-- Thumbnail Item Skin End -->
        </div>
        <!-- Thumbnail Navigator Skin End -->
        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
    </div>
    <!-- Jssor Slider End -->
										<!-- <img src="images/ui/s5.png" alt="Chi tiết sản phẩm" /> -->
									</div>
									<div class="box-basic-info">
									
										<div class="product-block-info">
											<h3>Samsung galaxy s4</h3>
										</div>
										
										<div class="product-block-info">
											<h4 class="price">Price: 15.000.000 vnd</h4>
										</div>
										
										<div class="product-block-info">										
											<div class="box-order">
												<form id="frm-order" method="post" action="">												
													<label>Chọn số lượng</label>
													<select>
														<option value="1">1</option>
														<option value="1">2</option>
														<option value="1">3</option>
													</select>
													<span class="image-submit">Mua online</span>													

													<script>
														$(document).ready(function(){
															$("#frm-order .image-submit").click(function(){
																$("#frm-order").submit();
															});
														});
													</script>
												</form>
											</div>
										</div>
									</div>
								</div>
								<div class="detail-info">
									<div class="tab-list">
										<ul>
											<li><a href="#detail" class="active"><h4>Thông số kỹ thuật</h4></a></li>				
											<li><a href="#describe" ><h4>Mo ta</h4></a></li>
										</ul>
										<div class="clearb"></div>
									</div>
									
									<div id="detail" class="tab-item">
										<table>
											<tr>
												<td>Cpu</td>
												<td>quancom s4</td>
											</tr>
											<tr>
												<td>Cpu</td>
												<td>quancom s4</td>
											</tr>
											<tr>
												<td>Cpu</td>
												<td>quancom s4</td>
											</tr>
											<tr>
												<td>Cpu</td>
												<td>quancom s4</td>
											</tr>
											<tr>
												<td>Cpu</td>
												<td>quancom s4</td>
											</tr>
										</table>
									</div>
									<div id="describe" class="tab-item">
										<p>abcxyz abcxyz abcxyz abcxyzabcxyzabcxyzabcxyzabcxyzabcxyzabcxyzabcxyzabcx
										yzabcxyzabcxyzabcxyzabcxyzabcxyzabcxyz
										abcxyzabcxyzabcxyzabcxyzabcxyzabcxyzabcxyzabcxyz abcxyz abcxyz abcxyz
										</p>
									</div>
								</div>
							</div>
							
						</div>
					</div>
					<!-- End left column -->
				</div><!-- End div wrap -->
				
				<!-- right -->
				<div id="right-column">
					<!-- Giới Thiệu  -->
					<div class="block-right">
						<h3 class="title"> Giới thiệu</h3>
						<div class="content">
							<div class="box-image">
								<a href="#" > <img src="images/ui/blackberry-qc.jpg" /></a>
							</div>						
							<div class="box-image">
								<a href="#" > <img src="images/ui/blackberry-qc.jpg" /></a>
							</div>
						</div>
					</div>
					
					<!-- Tin tức -->
					<div class="block-right">
						<h3 class="title">Tin tức</h3>
						<div class='content'>
							<ul>
								<li><a href="#">Blackberry Z10 giảm giá sốc</a></li>
								<li><a href="#">Blackberry Z10 giảm giá sốc</a></li>
								<li><a href="#">Blackberry Z10 giảm giá sốc</a></li>
								<li><a href="#">Blackberry Z10 giảm giá sốc</a></li>
								<li><a href="#">Blackberry Z10 giảm giá sốc</a></li>
							</ul>
						</div>
					</div>
				</div>
				<!-- End right -->
				
			</div>
			
			<!-- End main contain -->
		</div>
		
		<!-- End wrapper -->		
	</div>
	<!-- End section -->
	
	<!-- Footer -->
	<div id="wrapper-footer">
		<div class="wrapper">
			<div id="logo">
				<img src="images/ui/logo.png" title="Homepage" alt="Hmobile" />
			</div>
			<div id="footer-content">
				<p>
					Địa chỉ: 160 cao lỗ, Quận 8 , TP. HCM</p>
				</p>
				<p>
					Điện Thoại: 0128 327 6658</p>
				</p>
				<p>
					Email: trandinhhoanghac@gmail.com</p>
				</p>
			</div>
			<div class="clearb"></div>
		</div>
		
	</div>
	<!-- End footer -->
</body>
</html>